<template>
	<view class="client-pages" :class="themeName">

		<view class="category-content">
			<!-- 搜索 -->
			<view class="search-input flex p-20 bg-white">
				<u-search class="flex-1" v-model="keyword" height="72" bg-color="#F4F4F4" :show-action="false"
					:placeholder="$zhTran('请输入关键字')" @search="handleSearch" />
				<view class="flex m-l-20" @tap="chooseStatus">
					<text>{{clevel.desc}}</text>
					<u-icon name="arrow-down" size="24" class="m-l-10" color="rgba(196, 196, 196, 1)"></u-icon>
				</view>
			</view>
		</view>

		<view class="m-t-30 m-l-30 m-r-30">
			<text style="color: rgba(56, 56, 56, 1);font-size: 28rpx;">{{$zhTran('客户数量(人)')}}：</text>
			<text style="color: rgba(64, 115, 250, 1);font-size: 28rpx;">{{total_count}}</text>
		</view>

		<view class="client-list-item p-30">
			<mescroll-uni ref="mescrollRef" :fixed="false" :up="{
						  auto: false,
						  noMoreSize: 5,
						  empty: {
						  	icon: $getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
							tip: $zhTran('暂无客户~'), // 提示
						  	fixed: true
						  }
					  }" :down="{ 
						  auto: true,
						}" :bottom="150" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<block v-for="(item, idx) in clientList" :key="idx">
					<view class="client-list p-30 m-b-20">
						<view class="flex m-b-20">
							<u-image class="avatar" :src="item.user_info.avatar" mode="widthFix" borderRadius="50%">
							</u-image>
							<view class="m-l-30">
								<view class="nr m-r-20 bold">{{item.user_info.nickname}}</view>
								<view class="xs m-t-10 muted">
									{{item.user_info.mobile == ''? $zhTran('未绑定手机'):item.user_info.mobile}}
								</view>
							</view>
						</view>
						<u-divider half-width="100%" :use-slot="false"></u-divider>
						<view class="flex row-between m-t-20 m-b-20">
							<view class="level-info">
								<view>{{$zhTran('利润折扣等级')}}：<text class="primary">{{item.level_info.title}}</text>
								</view>
								<view class="m-t-20">{{$zhTran('销售折扣率')}}：<text
										class="primary">{{item.level_info.discount}}%</text>
								</view>
							</view>
							<view class="custom-btn m-r-20" @click="editProfitLevel(item)">
								<u-icon name="edit-pen" color="rgba(56, 56, 56, 1)" size="26" class="m-r-10">
								</u-icon>
								<text>{{$zhTran('修改')}}</text>
							</view>
						</view>
						<u-divider half-width="100%" :use-slot="false"></u-divider>
						<view class="time m-t-20">{{$zhTran('注册时间')}}：{{item.user_info.create_time}}</view>
					</view>
				</block>
			</mescroll-uni>
		</view>

		<u-select v-model="showVisible" :confirm-color="themeColor" cancel-color="#999" @confirm="valueChange($event)"
			:list="levelList" value-name="id" label-name="title"></u-select>
	</view>
</template>

<script>
	import {
		apiCloudShopStoreClient,
	} from "@/api/cloudshop"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		name: 'clientLists',
		mixins: [MescrollMixin],
		data() {
			return {
				clientList: [],
				levelList: [],
				clsp_id: '',
				clevel: {
					id: '',
					desc: this.$zhTran('全部等级'),
				},
				keyword: '',
				total_count: 0,
				showVisible: false
			};
		},
		onLoad() {
			const {
				clsp_id,
				is_error
			} = this.$Route.query
			this.clsp_id = clsp_id
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}

			this.refreshData()
		},
		methods: {
			handleSearch() {
				this.mescroll && this.mescroll.resetUpScroll();
			},
			refreshData() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},

			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				apiCloudShopStoreClient({
					store_id: this.clsp_id,
					clevel_id: this.clevel.id,
					keyword: this.keyword,
					page_no: num,
					page_size: size,
				}).then(({
					lists,
					page_size,
					count,
					extend
				}) => {
					if (num === 1) this.clientList = []
					this.clientList = [...this.clientList, ...lists]
					this.total_count = count
					this.levelList = extend.level_list
					this.levelList.unshift({
						id: '',
						title: '全部等级'
					})
					this.clientList = this.$zhTran(this.clientList)
					this.levelList = this.$zhTran(this.levelList)
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},
			editProfitLevel(row) {
				this.$Router.push({
					path: '/bundle2/pages/cloud_shop/client/client_level_change',
					query: {
						clsp_id: this.clsp_id,
						clsp_cid: row.id,
						clevel_id: row.clevel_id,
						level_title: row.level_info.title,
					}
				})
			},
			chooseStatus() {
				this.showVisible = true
			},
			valueChange(e) {
				this.clevel.id = e[0].value
				this.clevel.desc = e[0].label
				this.refreshData()
			},
		},
	};
</script>

<style lang="scss">
	.client-list {
		background-color: #fff;
		border-radius: 10rpx;

		.avatar {
			width: 80rpx;
			border-radius: 50%;

		}

		.custom-btn {
			padding: 12rpx 30rpx;
			font-size: 28rpx;
			border: 1rpx solid rgba(229, 229, 229, 1);
		}

		.level-info {
			.primary {
				color: rgba(64, 115, 250, 1);
			}
		}
	}

	.sort {

		&-header {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100rpx;
			padding: 0 30rpx;
			font-weight: bold;
			font-size: 32rpx;
			background-color: #FFFFFF;
		}

		&-main {
			padding: 0 30rpx 30rpx 30rpx;

			.sort-sel {
				color: rgba(56, 56, 56, 1);
				background-color: rgba(246, 247, 249, 1);
				font-size: 28rpx;
				padding: 30rpx;
				text-align: center;
				margin-bottom: 15rpx;

				&.selected {
					color: #fff;
					background-color: rgba(64, 115, 250, 1);
				}
			}
		}

		&-footer {
			padding: 0 20rpx env(safe-area-inset-bottom);
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			background-color: #fff;

			.btn {
				flex: 1;

				&--cancel {
					color: rgba(38, 38, 38, 1);
				}
			}
		}
	}
</style>